<template>
	<div class="gis_wrap">
		<el-row class="GIS-container" v-loading="loading">
			<!-- 图标 -->
			<div class="ele_1">
				<span>正常</span>
				<span>超标</span>
				<span>离线</span>
			</div>
			<!-- 点位列表 -->
			<div class="ele_2">
				<table>
					<tr>
						<th>企业名称</th>
						<th>企业状态</th>
					</tr>
					<tr v-for="item in siteWqiList" :key="item.value" v-if="showTabel" @click="selectSite(item)">
						<td v-if="item.position">
							{{ item.deptName }}
						</td>
						<td>
							<img src="/img/bg/normal.png" alt="" style="width: 15px;height: 15px;" v-if="item.status==1"/>
							<img src="/img/bg/abnormal.png" alt="" style="width: 15px;height: 15px;" v-else-if="item.status==2"/>
							<img src="/img/bg/offline.png" alt="" style="width: 15px;height: 15px;" v-else-if="item.status==3"/>							
						</td>
					</tr>
				</table>
			</div>
			<baidu-map ref="map" class="map" :center="center" :zoom="zoom" @zoomend="zoomEnd" :scroll-wheel-zoom="true" :map-click="false" @moveend="moveEnd" @ready="handler">
				<!-- 自定义控件-点位搜索 -->
				<bm-control anchor="BMAP_ANCHOR_TOP_RIGHT" :offset="{ width: 40, height: 20 }">
					<el-select size="medium" style="width: 250px;" filterable v-model="currentPointId">
						<el-option v-for="(item, index) in pointList" :key="index" :label="item.deptName" :value="item.deptInfoId">
							<el-row style="font-size: 12px;padding:0 10px;">
								{{ item.deptName }}
							</el-row>
						</el-option>
					</el-select>
					<el-button icon="el-icon-search" size="medium" @click="focusPoint" type="primary" style="margin-left: 5px"></el-button>
					<div style="text-align: center;margin-top: 10px;display: flex;justify-content: center;">
						<img src="/img/system/close.png" alt="" style="display: block;" @click="showTabel=false" v-if="showTabel" />
						<img src="/img/system/open.png" alt="" style="display: block;" @click="showTabel=true" v-else/>
					</div>
				</bm-control>
				<!-- 缩略图控件：anchor(位置) size(大小) -->
				<bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :size="size" :isOpen="true"></bm-overview-map>
				<!-- 点位 -->
				<div v-for="(item, index) in pointList" :key="index">
					<bm-marker v-if="item.devices && item.status === '1'" :key="index" :icon="{
			              url: '/img/bg/normalMap.png',
			              size: { width: 30, height: 30 }
			            }" :position="item.position" @mouseover="pointClick(item)"></bm-marker>
					<bm-marker v-else-if="item.devices && item.status === '2'" :key="index" :icon="{
			              url: '/img/bg/abnormalMap.png',
			              size: { width: 30, height: 30 }
			            }" :position="item.position" @mouseover="pointClick(item)"></bm-marker>
					<bm-marker v-else-if="item.devices && item.status === '3'" :key="index" :icon="{
			              url: '/img/bg/offlineMap.png',
			              size: { width: 30, height: 30 }
			            }" :position="item.position" @mouseover="pointClick(item)"></bm-marker>
				</div>
				<bm-info-window :position="infoData.position" :title="infoData.deptName" :show="infoShow" :offset="{ width: 0, height: -20 }" :closeOnClick="false" style="max-height:300px;overflow-y: auto;" @clickclose="withInfoClose">
					<div class="info_item">
						<div class="info_label">所属地区：</div>
						<div class="info_value">
							<span>{{ infoData.regionName }}</span>
						</div>
					</div>
					<div>
						<span style="margin-right: 10px;">联系人 : {{infoData.contacts?infoData.contacts:'-'}}</span>
						<span>联系方式 : {{infoData.contactWay?infoData.contactWay:'-'}}</span>
					</div>
					<div v-for="(device, dIndex) in infoData.devices" :key="dIndex">
						<div class="info_item" @click="toHistory(device)" style="cursor: pointer;" v-if="device.factorList">
							<div class="info_value" style="width:360px">
								<p class="device_title">机组： {{device.groupName}}</p>
								<span v-for="(item, index) in device.factorList" :key="index" style="display:block;line-height:26px;">
					                  <span v-if="item.alias !== '风机' && item.alias !== '净化器'">
					                    <span v-if="item.isAbnormal > 0" style="color: #FF0000;"
					                      >{{ item.alias }} : {{ item.collectValue || "-" }}
					                      {{ item.collectValue ? item.unit : "" }}</span
					                    >
					                    <span v-else
					                      >{{ item.alias }} : {{ item.collectValue || "-" }}
					                      {{ item.collectValue ? item.unit : "" }}</span
					                    >
					                  </span>
					                  <span v-else>
					                    {{ item.alias }} : 
					                    <img class="motion_state_img" v-if="item.collectValue" alt="" :src="getMotionSrc(item.collectValue)"/>
					                    <span v-else>-</span>
								      </span>
								</span>
							</div>
						</div>
					</div>
				</bm-info-window>
			</baidu-map>

		</el-row>
	</div>
</template>

<script>
	import { getData } from "@/api/loam/index";
	import { getSystemConfig } from "@/api/ficm/systemName";
	export default {
		data() {
			return {
				showTabel: true,
				// 设置center和zoom之后地图才会进行渲染
				center: "",
				size: {
					width: 300,
					height: 180
				},
				zoom: 0,
				pointList: [], // 点位数组，用于渲染到地图
				pointListObj: {}, // 点位对象（按照企业格式化）
				infoData: {}, //  信息窗体数据
				infoShow: false, // 信息窗体显隐
				currentPointId: null, // 当前选择的点位
				dialogTitle: null, // 弹框标题
				videoVisible: false, // 弹框显隐
				loading: false,
				siteWqiList: []
			};
		},
		methods: {
            selectSite(obj){
            	this.currentPointId = obj.deptInfoId;
            	this.center = obj.position;
            	this.pointClick(obj);
            },
			// 地图ready事件
			handler() {
				this.loading = true;
				getSystemConfig().then(res => {
					if(res.data.data.zoomLevel) {
						this.zoom = res.data.data.zoomLevel
					} else {
						this.zoom = 11
					}
				})
				this.getMapData()
					.then(resData => {
						this.pointList = [];
						this.pointListObj = {};
						this.siteWqiList = [];
						resData.gisVOList.forEach(item => {
							if(this.pointListObj[item.deptInfoId] === undefined) {
								this.pointListObj[item.deptInfoId] = {
									deptInfoId: item.deptInfoId,
									deptName: item.deptName,
									regionCode: item.regionCode,
									regionName: item.regionName,
									position: {
										lng: item.logitude,
										lat: item.latitude
									},
									devices: [],
									status: "",
									contactWay: item.contactWay,
									contacts: item.contacts
								};
							}
							this.pointListObj[item.deptInfoId].devices.push({
								collectTime: item.collectTime,
								deviceName: item.deviceName,
								factorList: item.factorList,
								groupId: item.groupId,
								groupName: item.groupName,
								mn: item.mn,
								siteId: item.siteId,
								siteName: item.siteName,
								state: item.state,
								status: item.status
							});
						});
                        
						for(var deptInfoId in this.pointListObj) {
							// 该企业下所有设备的状态集合
							var deptStatusArr = [];
							this.pointListObj[deptInfoId].devices.forEach(device => {
								if(deptStatusArr.indexOf(device.status) < 0) {
									deptStatusArr.push(device.status);
								}
							});

							// 该企业的实际状态（只要有一个超标，就算超标， 全部离线才算离线）
							if(deptStatusArr.length === 1) {
								this.pointListObj[deptInfoId].status = deptStatusArr[0];
							} else {
								if(deptStatusArr.indexOf("2") >= 0) this.pointListObj[deptInfoId].status = "2";
								else this.pointListObj[deptInfoId].status = "1";
							}

							this.pointList.push(this.pointListObj[deptInfoId]);
							this.siteWqiList.push(this.pointListObj[deptInfoId]);
						}
						
                        
						this.loading = false;
						// 在第一项添加 全部
						this.pointList.splice(0, 0, {
							deptName: "全部",
							deptInfoId: "all"
						});
						this.currentPointId = this.pointList[0].deptInfoId;
						this.focusPoint();
					})
					.catch(() => {
						this.loading = false;
					});
			},

			// 获取当前缩放比
			zoomEnd({
				target
			}) {
				this.zoom = target.getZoom();
			},

			// 地图拖拽结束后触发，重新定位中心点，解决同一个点位在拖拽后无法再次定位的问题
			moveEnd({
				target
			}) {
				this.center = target.getCenter();
			},

			// 跳转至综合（历史）数据页面
			toHistory(device) {
				this.$store.commit("SET_GISID", {
					value: device.groupId
				});
				this.$router.push({
					path: "/loam/history/historydata"
				});
			},

			// 聚焦到选择的点位
			focusPoint() {
				if(this.currentPointId != "all") {
					let status = false;
					this.siteWqiList = [];
					this.pointList.forEach(item => {
						if(item.deptInfoId == this.currentPointId) {
							this.siteWqiList.push(item);
							this.pointClick(item); // 打开信息窗口
							this.center = item.position; // 设置中心点
							status = true;
						}
					});
					if(!status) {
						this.center = "无锡";
					}
				} else {
					this.withInfoClose();
					this.center = this.pointList[1].position;
					this.siteWqiList = this.pointList.slice(1); // 去掉第一个是全部的数组
				}
			},

			// 请求地图数据
			getMapData() {
				return new Promise((resolve, reject) => {
					getData().then(res => {
						if(res.data.success) {
							resolve(res.data.data);
						} else {
							reject("网络拥堵，请退出重试");
						}
					});
				});
			},

			// 显示监控
			showVideo(point) {
				this.dialogTitle = point.siteName;
				this.videoVisible = true;
			},

			// 点击信息窗口关闭按钮时触发，把控制信息窗口显隐的变量置为false
			withInfoClose() {
				this.infoShow = false;
			},

			// 点击点位触发，展示信息窗口
			pointClick(point) {				
				this.infoData = point;
				this.infoShow = true;
			},

			// 根据0/1返回风机、净化器运行状态图表
			getMotionSrc(value) {
				var imgSrc = "";
				if(value === "1") imgSrc = "/img/bg/normal.png";
				else if(value === "0") imgSrc = "/img/bg/offline.png";
				return imgSrc;
			}
		}
	};
</script>

<style>
	.BMap_pop div:nth-child(1) div {
		border-top-left-radius: 5px;
	}
	
	.BMap_pop div:nth-child(3) div {
		border-top-right-radius: 5px;
	}
	
	.BMap_pop div:nth-child(5) div {
		border-bottom-left-radius: 5px;
	}
	
	.BMap_pop div:nth-child(7) div {
		border-bottom-right-radius: 5px;
	}
</style>
<style lang="scss" scoped>
	.GIS-container {
		position: absolute;
		top: 40px;
		bottom: 0px;
		width: 100%;
		padding: 10px 20px 0 0!important;
		height: calc(100% - 50px)!important;
		.map {
			height: 100%;
			.info_item {
				display: flex;
				font-size: 12px;
				margin: 5px 0;
				.state_online {
					color: #009e00;
				}
				.state_offline {
					color: #8a8a8a;
				}
			}
		}
		.dialog-video {
			width: 100%;
		}
		.overlay_top {
			position: absolute;
			top: 10px;
			width: 100%;
			display: flex;
			justify-content: center;
			.count_wrapper {
				display: flex;
				.count_item {
					width: 20%;
					height: 100%;
					margin: 0 10px;
					.count_label {
						font-size: 25px;
						height: 40px;
						text-align: center;
					}
					.count_value {
						display: flex;
						.number_cell {
							margin: 0 5px;
							padding: 2px 5px;
							font-size: 35px;
							border-radius: 5px;
							background: rgba(170, 170, 170, 0.4);
						}
					}
				}
			}
		}
		.ele_1 {
			position: absolute;
			bottom: 10px;
			left: 10px;
			z-index: 99;
			background: rgba($color: #fff, $alpha: 0.9);
			padding: 5px 0;
			span {
				display: block;
				border-radius: 5px;
				color: #fff;
				text-align: center;
				font-size: 13px;
				line-height: 20px;
				width: 40px;
				margin: 5px 10px;
			}
			span:first-child {
				background: #009e00;
			}
			span:nth-child(2) {
				background: #ff0000;
			}
			span:nth-child(3) {
				background: #5c5c5c;
			}
		}
		.ele_2 {
			position: absolute;
			right: 60px;
			top: 94px;
			z-index: 99;
			max-height: calc(100% - 290px);
			width: 310px;
			overflow: scroll;
			table {
				width: 100%;
				text-align: center;
				border: 1px solid #dcdfe6;
				font-size: 14px;
				border-bottom: none;
				background: rgba($color: #fff, $alpha: 0.7);
				th,
				td {
					cursor: pointer;
					font-weight: normal;
					height: 30px;
					border-bottom: 1px dashed #dcdfe6;
				}
				.item_cir {
					width: 10px;
					height: 10px;
					border-radius: 50%;
					display: inline-block;
				}
			}
		}
		.device_title {
			font-weight: bold;
		}
		.motion_state_img {
			width: 15px;
			height: 15px;
			margin-bottom: -3px;
		}
	}
</style>